import React,{Suspense} from 'react'
import { Navigate , BrowserRouter , Route , Routes } from 'react-router-dom';
import routes from './RoutesConfig';
import {ROUTETYPES} from '../Utils/Type';

function RouteView() {  // ROUTETYPES[]  也可写成  Array<ROUTETYPES>
    const renderRoute = (routes:Array<ROUTETYPES>)=>{
        return  routes.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to?<Navigate to={item.to}/>:<item.element />}>
                { item.children && renderRoute(item.children)}
            </Route>    
        })
    }
    return (
        <Suspense fallback>
            <BrowserRouter>
                <Routes>
                    {renderRoute(routes)}
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default RouteView